﻿//Recipe
function dropdrag() {
    $(".ul02 li").draggable({
        cancel: "a.ui-icon",
        revert: "invalid",
        containment: "document",
        helper: "clone",
        cursor: "move"
    });

    $(".GroceryMealPlan").droppable({
        accept: ".ul02 > li",
        activeClass: "ui-state-highlight",
        drop: function (event, ui) {
            
            var type = $('#hdType').val();
            var $drag = $(ui.draggable);
            var $item = $(ui.draggable);
            var objectID = $item[0].id;
            if (type == 'mp') {
                deleteImage(ui.draggable);
                var recipeidlist = "";
                var leftheight = $('#leftpanel').height();
                if (leftheight < 770) $('#leftpanel').height(770);
                if ($('#hdMealPlanId').val() == "") {
                    recipeidlist = objectID;
                    $('#hdMealPlanId').val(recipeidlist);
                    $('.divMessage').remove();
                }
                else {
                    recipeidlist = $('#hdMealPlanId').val();
                    recipeidlist = recipeidlist + "," + objectID;
                    $('#hdMealPlanId').val(recipeidlist);
                }
            }
            else {
                var leftheight = $('#leftpanel').height();
                if (leftheight < 770) $('#leftpanel').height(770);
                var name = $item[0].children[0].title;
                var serving = $('#txtServing').val();
                var ingredient = $('#ingredientList' + objectID).text();
                var ser = $('#Serving' + objectID).text();
                var department = $('#departmentList' + objectID).text();

                if ($('#hdDepartment').val() == '')
                    $('#hdDepartment').val(department);
                else {
                    var depart = $('#hdDepartment').val();
                    depart = depart + department;
                    $('#hdDepartment').val(depart);
                }

                if ($('#hdIngredient').val() == '') {
                    $('#hdIngredient').val(ingredient);
                }
                else {
                    var ing = $('#hdIngredient').val();
                    ing = ing + '|' + ingredient;
                    $('#hdIngredient').val(ing);
                }

                document.getElementById('hdRecipeId').value = document.getElementById('hdRecipeId').value + ',' + objectID;

                //                CallSaveSession('RecipeGrocery', document.getElementById('hdRecipeId').value);

                LoadGroceryUserDepartView($('#hdDepartment').val(), $('#hdIngredient').val());
                LoadGroceryUserRecipeView(ingredient, name, ser, objectID, serving, department);

                $item.remove();
            }
        }
    });

    $(".ul02").droppable({
        accept: ".GroceryMealPlan li",
        drop: function (event, ui) {
            var $item = $(ui.draggable);
            var objectID = $item[0].id;
            recycleImage(ui.draggable);
            var recipestring = $('#hdMealPlanId').val();
            recipestring = recipestring.replace(objectID, "");
            $('#hdMealPlanId').val(recipestring);
        }
    });

    $(".ul02 > li").click(function (event) {

        var type = $('#hdType').val();
        var $item = $(this), $target = $(event.target);
        var objectID = $item[0].id;
        if (type == 'mp') {
            var classname = $("#" + objectID + " div a").attr('class');
            if (event.target.id == "plusicon" || event.target.id == "minusicon") {
                if (classname == "img_l1") {
                    recycleImage($item);
                    var recipestring = $('#hdMealPlanId').val();
                    recipestring = recipestring.replace(objectID, "");
                    $('#hdMealPlanId').val(recipestring);
                }
                else {
                    var leftheight = $('#leftpanel').height();
                    if (leftheight < 770) $('#leftpanel').height(770);
                    deleteImage($item);
                    var recipeidlist = "";
                    if ($('#hdMealPlanId').val() == "") {
                        recipeidlist = objectID;
                        $('#hdMealPlanId').val(recipeidlist);
                    }
                    else {
                        recipeidlist = $('#hdMealPlanId').val();
                        recipeidlist = recipeidlist + "," + objectID;
                        $('#hdMealPlanId').val(recipeidlist);
                    }
                }
            }
        }
        else {
            var classname = $("#" + objectID + " div a").attr('class');
            if (event.target.id == "plusicon" || event.target.id == "minusicon") {
                var name = $item[0].children[0].title;
                var serving = $('#txtServing').val();
                var ingredient = $('#ingredientList' + objectID).text();
                var ser = $('#Serving' + objectID).text();
                var department = $('#departmentList' + objectID).text();
                var leftheight = $('#leftpanel').height();
                if (leftheight < 770) $('#leftpanel').height(770);
                if ($('#hdDepartment').val() == '')
                    $('#hdDepartment').val(department);
                else {
                    var depart = $('#hdDepartment').val();
                    depart = depart + department;
                    $('#hdDepartment').val(depart);
                }

                if ($('#hdIngredient').val() == '') {
                    $('#hdIngredient').val(ingredient);
                }
                else {
                    var ing = $('#hdIngredient').val();
                    ing = ing + '|' + ingredient;
                    $('#hdIngredient').val(ing);
                }

                document.getElementById('hdRecipeId').value = document.getElementById('hdRecipeId').value + ',' + objectID;

                LoadGroceryUserDepartView($('#hdDepartment').val(), $('#hdIngredient').val());
                LoadGroceryUserRecipeView(ingredient, name, ser, objectID, serving, department);
                $item.remove();
            }
        }
        return false;
    });
}

var recycle_icon = "<div class='clearfix'><a id='minus' class='img_l1'><img id='minusicon' src='images/iconminus.jpg' alt='' width='13' height='12' /></a></div>";
function deleteImage($item) {
    var objectID = $item[0].id;

    $item.fadeOut(function () {
//        var $list = $("ul", "#mealplan").length ? $("ul", "#mealplan") : $("<ul class='ui-helper-reset ul02'/>").appendTo("#mealplan");
        //
        var $list = $("ul", ".GroceryMealPlan").length ? $("ul", ".GroceryMealPlan") : $("<ul class='ui-helper-reset ul02'/>").appendTo(".GroceryMealPlan");
        
        $item.find("p.img_l img").remove();
        $item.find("p.img_r img").remove();
        $item.append(recycle_icon).appendTo($list).fadeIn(function () {
            $item.animate({ width: "90px" })
                        .find("p")
                            .animate({ width: "90px" });
        });
        $item.find("img").css("height", "90").css("width", "90").end()
        $item.find("a.img_l1 img").css("height", "12").css("width", "13").end()

    });
}

var trash_icon = "<div class='clearfix'><p class='img_l'><img src='images/icon1.jpg' alt='' width='13' height='12' /></p><p class='img_r'><img src='images/icon2.jpg' alt='' width='13' height='13' /></p></div>";

function recycleImage($item) {
    $item.fadeOut(function () {
        $item
        .animate({ width: "220px" })
          .find("a.img_l1 img")
            .remove()
          .end()
          .find("img")
            .css("height", "220px").css("width", "220px")
          .end()
          .find("p")
            .css("width", "220px")
          .end()
          .append(trash_icon)
          .appendTo(".ul02")
          .fadeIn();
    });

}

//End Recipe

//Meal plan
function dropdragmealplan() {
    $(".ul02 li").draggable({
        cancel: "a.ui-icon",
        revert: "invalid",
        containment: "document",
        helper: "clone",
        cursor: "move"
    });

    $(".GroceryMealPlan").droppable({
        accept: ".ul02 > li",
        activeClass: "ui-state-highlight",
        drop: function (event, ui) {
            var $drag = $(ui.draggable);
            var $item = $(ui.draggable);
            var objectID = $item[0].id;
            var RecipeList = $('#RecipeList' + objectID).text();
//            var Recipe = RecipeList.split(',');
            var leftheight = $('#leftpanel').height();
            if (leftheight < 770) $('#leftpanel').height(770);
            CallRenderDepartmentView(objectID);
            CallRenderRecipeview(RecipeList);
        }
    });

    $(".ul02").droppable({
        accept: ".GroceryMealPlan li",
        drop: function (event, ui) {
            var $item = $(ui.draggable);
            var objectID = $item[0].id;
            recycleImage(ui.draggable);
            var recipestring = $('#hdMealPlanId').val();
            recipestring = recipestring.replace(objectID, "");
            $('#hdMealPlanId').val(recipestring);
        }
    });

    $(".ul02 > li").click(function (event) {

        var $item = $(this), $target = $(event.target);
        var objectID = $item[0].id;
        var classname = $("#" + objectID + " div a").attr('class');
        if (event.target.id == "plusicon" || event.target.id == "minusicon") {
            var leftheight = $('#leftpanel').height();
            if (leftheight < 770) $('#leftpanel').height(770);
            var RecipeList = $('#RecipeList' + objectID).text();
            //            var Recipe = RecipeList.split(',');
            CallRenderDepartmentView(objectID);
            CallRenderRecipeview(RecipeList);
            $item.remove();
        }
        return false;
    });
}

function CallSaveSession(key,value) {
    var url = "";
    var data = "";
    url = "PIMService.asmx/SaveSession";
    data = "{'key':'" + key + "','value':'" + value + "'}";
    $.ajax({
        type: "POST",
        url: url,
        data: data,
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: function (response) {
//            alert('Save success');
        },
        error: function (msg) { }
    });
}

function CallRenderRecipeDepartView(RecipeList) {
    var Recipe = RecipeList.split(',');
    $.each(Recipe, function (key, RecipeId) {
        if (RecipeId != '') {
            var url = "";
            var data = "";
            url = "PIMService.asmx/GetRecipeUserIngredientDepart";
            data = "{'RecipeId':'" + RecipeId + "'}";

            $.ajax({
                type: "POST",
                url: url,
                data: data,
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (response) {
                    var RecipeInfo = response.d;
                    var ingredient = RecipeInfo.IngredientNameString;
                    var name = RecipeInfo.RecipeName;
                    var ser = RecipeInfo.Serving;
                    var objectID = RecipeInfo.RecipeID;
                    var serving = $('#txtServing').val();
                    var department = RecipeInfo.DepartNameString;
                    document.getElementById('hdRecipeId').value = document.getElementById('hdRecipeId').value + ',' + objectID;

                    LoadGroceryUserRecipeView(ingredient, name, ser, objectID, serving, department);
                    //                    LoadGroceryUserDepartView(department, ingredient);
                    LoadGroceryUserDepartView(department, $('#hdIngredientDepart').val());
                },
                error: function (msg) { }
            });
        }
    });
}

function CallRenderRecipeview(RecipeList) {
    var Recipe = RecipeList.split(',');
    $.each(Recipe, function (key, RecipeId) {
        if (RecipeId != '') {
            var url = "";
            var data = "";
            url = "PIMService.asmx/GetRecipeUserIngredientDepart";
            data = "{'RecipeId':'" + RecipeId + "'}";

            $.ajax({
                type: "POST",
                url: url,
                data: data,
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (response) {
                    var RecipeInfo = response.d;
                    var ingredient = RecipeInfo.IngredientNameString;
                    var name = RecipeInfo.RecipeName;
                    var ser = RecipeInfo.Serving;
                    var objectID = RecipeInfo.RecipeID;
                    var serving = $('#txtServing').val();
                    var department = RecipeInfo.DepartNameString;
                    document.getElementById('hdRecipeId').value = document.getElementById('hdRecipeId').value + ',' + objectID;
                    LoadGroceryUserRecipeView(ingredient, name, ser, objectID, serving, department);
                },
                error: function (msg) { }
            });
        }
    });
}

function CallRenderDepartmentView(MealPlanId) {

    var url = "";
    var data = "";
    url = "PIMService.asmx/GetIngredientDepartByMealPlanId";
    data = "{'MealPlanId':'" + MealPlanId + "'}";
    $.ajax({
        type: "POST",
        url: url,
        data: data,
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: function (response) {
            var MealInfo = response.d;
            var departmentlist = MealInfo.ListDepartment;
            var ingredient = MealInfo.ListIngredient;
            LoadGroceryUserDepartView(departmentlist, ingredient);
        },
        error: function (msg) { }
    });
}